<template>
	<div class="cart_list">
		<div class="cart_title">为你推荐</div>
		<div class="cart_listul">
			<ul class="clear">
				<li v-for='item in allData' class="cart_custom">
				<router-link :to="'/detail/'+item.action.path">
				  <a href="#">
					<div class="cart_img"><img :src="item.image_url" alt="" /></div>
					<div class="cart_info">
						<div class="cart_name">{{ item.name }}</div>
						<div class="cart_price">￥{{ item.price }}</div>
					</div>
				   </a>
				   </router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default{
		data(){
			return{
				allData:[]
			}
		},
		created(){
			this.axios.get('../static/data/cartpage.json').then(data =>{
				console.log(data.data.data.recom_list);
				this.allData = data.data.data.recom_list;
			})
		}
	}
</script>

<style scoped>
	.header{
		/*position: relative;*/
		border-bottom: 1px solid #eee;
		background: #f2f2f2;
		padding: 0 .2rem;
		height: .49rem;
	}
	 .cart_list .cart_title{
	 	height: 0.46rem;
	 	font-size: .16rem;
	 	padding: 0 0.2rem;
	 	line-height: 0.46rem;
	 }
	 .cart_custom{
	 	float: left;
	 	width: 50%;
	 	box-sizing: border-box;
	 	padding-right: .04rem;
	 	color: #f71f1f;
	 }
	 .cart_custom .cart_img{
	 	height: 2.03rem;
	 }
	 .cart_custom .cart_img>img{
	 	width: 100%;
	 	height: auto;
	 	min-height: 1rem;
	 }
	 .cart_info{
	 	padding: .08rem .15rem;
	 }
	 .cart_info .cart_name{
	 	font-size: .15rem;
	 	
	 }
	 .cart_info .cart_price{
	 	font-size: .15rem;
	 	color: #ff6000;
	 }
	 .cart_listul{
	 	margin-bottom: 0.8rem;
	 }
</style>